<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Title</title>
</head>
<body>


<!--<span style="font-size: 15px;" th:text="'現在是 '+ ${date} + '你好'" />-->
<h1 style="font-size: 15px;" th:text="'現在是 '+ ${date} + '你好'" />
<input type="hidden" th:value="${resumeList}" id="resumeList"/>
<!--<h1>現在是${date}你好</h1>-->
<!--${resumeList}-->
<button id="add" value="123">新增</button>
<table border="1" id="resumeTable">
    <tr>
        <td>id</td>
        <td>address</td>
        <td>name</td>
        <td>phone</td>
        <td>操作</td>
    </tr>
</table>


<div id="myForm" style="display: none;">

    <input  type="text" style="display:none"   id="id"/><br>
    <input  placeholder="姓名" id="name"/><br>
    <input  placeholder="地址" id="address"/><br>
    <input  placeholder="手机" id="phone"/><br>
    <button id="submit" value="123">提交</button>
</div>


<!--<button id="button2" value="321" class="testBtn">tijiao</button>-->

</body>
</html>
<script src="http://www.wodexiangce.cn/js/jquery-1.11.3.min.js" type="text/javascript"></script>
<!--<script src="/js/jquery.min.js"></script>-->


<script type="text/javascript">

    $(document).ready(function () {

        initPage();
        //给删除按钮添加响应事件
        $("#resumeTable").on("click","tbody>tr .deleteBtn",function() {

            // 发送ajax请求
            $.ajax({
                url: '[[@{/}]]resume/deleteById?id='+this.value,
                contentType: 'application/json;charset=utf-8',
                dataType: 'text',
                success: function () {
                    alert("删除成功！");
                    window.location.reload();
                }
            })

        });

        //给修改按钮添加响应事件
        $("#resumeTable").on("click","tbody>tr .updateBtn",function() {
            //获取单行信息
            var trSeq = $(this).parents().filter("tbody").find(".updateBtn").index($(this)[0])+1; //所获取的当前行的行号
            var tr = $("#resumeTable tr:eq("+trSeq+")");
            var id = tr.find("td:first").text();
            var address = tr.find("td:nth-child(2)").text();
            var name = tr.find("td:nth-child(3)").text();
            var phone = tr.find("td:nth-child(4)").text();

            //封装成对象进行传递
            var data = {};
            data.id = id;
            data.address = address;
            data.name = name;
            data.phone = phone;


            $("#id").val(id);
            $("#name").val(name);
            $("#address").val(address);
            $("#phone").val(phone);
            document.getElementById("myForm").style.display="";//显示

        });


    });


    function initPage() {
        // <%--var selectValue1 = '<%=request.getAttribute("resumeList")%>';--%>
        var resumeList=$("#resumeList").val();
        // var resumeList = '${resumeList}';
        var table = $("#resumeTable");

        if(resumeList != '') {
            resumeList = JSON.parse(resumeList);
            for (var p  in resumeList) {

                var tr =
                    "<tr>" +
                    "<td>"+resumeList[p].id+"</td>"+
                    "<td>"+resumeList[p].address+"</td>" +
                    "<td>"+resumeList[p].name+"</td>" +
                    "<td>"+resumeList[p].phone+"</td>" +

                    "<td><div >" +
                    "<button class='updateBtn' value = " + resumeList[p].id + ">修改</button>"+
                    "<button class='deleteBtn' value = " + resumeList[p].id + ">刪除</button>"+

                    "</div></td>" +
                    "</tr>";
                table.append(tr);

            }
        }

    }

</script>


<script type="text/javascript">


    $("#add").click(function(){
        $("#id").val("");
        $("#name").val("");
        $("#address").val("");
        $("#phone").val("");

        document.getElementById("myForm").style.display="";//显示
    });


    $("#submit").click(function(){

        var data = {};
        data.id = $("#id").val();
        data.name = $("#name").val();
        data.address = $("#address").val();
        data.phone = $("#phone").val();

        $.ajax({
            type: 'POST',
            url: '[[@{/}]]resume/save',
            data:JSON.stringify(data),
            contentType:'application/json;charset=utf-8',
            dataType:"text",
            success: function (data) {
                alert("成功");
                // alert(JSON.stringify(data));
                // alert(data);
                // console.log(data);
                window.location.reload();
            },
            error:function (data) {
                alert("错误"+data);
                // console.log(data);
                window.location.reload();
            }

        });
        document.getElementById("myForm").style.display="none";//隐藏
    });


</script>